<script setup  lang="ts">
import { ref } from 'vue'
//普通父子组件交互
import son from './son.vue'
// ref获取元素的操作理解：
// 先给目标元素的ref属性设置一个值，假设为dialogShow
// 然后在setup函数中调用ref函数，值为null,并赋值给变量dialogShow,变量名必须与我们给元素设置的ref属性名相同
// 把对元素的引用变量dialogShow返回（return）出去(省略的步骤)
const dialogShow = ref<any>(null)
   //ref的理解 https://zhuanlan.zhihu.com/p/527995785
const addUser = () => {
   console.log(dialogShow,66)
   dialogShow.value.dialogShow(true)
   // 补充：设置的元素引用变量只有在组件挂载后（onMounted）才能访问到，因此在挂载前对元素进行操作都是无效的
}
let bb  = (val:string,val2:number):void=>{
   // alert(val+val2)
}

let bbFNC = ():void=>{
   // alert('7777')  
}
//

</script>

<template>
   <son ref="dialogShow" foo='foo数据' foo1="foo1数据" @bb='bb' @bbfnc="bbFNC"/>
   <button @click="addUser">按钮</button>
   <el-divider />

</template>
   
<style scoped>

</style>